<template>
  <div class="">
    <button class="bg-[#08f] outline-none border-none py-1 px-4 text-sm leading-4 cursor-pointer" id="btn">toast</button>
  </div>
</template>

<script lang="ts" setup name="rsjs-toast测试">
import { of, concat, fromEvent, timer } from 'rxjs';
import { mapTo, switchMap, finalize, tap } from 'rxjs/operators';
// @ts-ignore
import { watch } from 'rxjs-watcher';
// @ts-ignore
onMounted(() => {
  const click$ = fromEvent(document.getElementById('btn')!, 'click');
  const toast$ = click$.pipe(
    switchMap(() => {
      let hideByDuration = false;

      const duration$ = timer(2000).pipe(
        mapTo('hide by duration'),
        tap(() => (hideByDuration = true))
      );

      return concat(of('show').pipe(watch('show', 10)), duration$).pipe(
        watch('hide', 10),
        finalize(() => {
          if (!hideByDuration) {
            console.log('hide by next');
          }
        })
      );
    })
  );

  toast$.subscribe(console.info);
})
</script>

<style lang="scss" scoped></style>